<template>
    <div class="efeContainer">
        <!--自定义布局-->
        <grid-layout
            :col-num="24"
            :is-draggable="draggable"
            :is-mirrored="false"
            :is-resizable="resizable"
            :layout.sync="layout"
            :margin="[10, 10]"
            :row-height="10"
            :use-css-transforms="true"
            :vertical-compact="true"
        >
            <grid-item
                v-for="item in layout"
                :key="item.i"
                :h="item.h"
                :i="item.i"
                :w="item.w"
                :x="item.x"
                :y="item.y"
            >
                <div v-if="item.name === '电度'" class="chartDiv">
                    <!--电度头部区域-->
                    <div class="electricHead box">
                        <span class="name">电度 : </span>
                        <span class="data" v-text="electricData.yData[electricData.yData.length - 1]"> </span>
                        <span class="SI"> 千瓦时(KW/h)</span>
                        <span class="name" style="margin: 0 0 0 10px">总电度 : </span>
                        <span class="data">{{
                                electricData.yData.length > 0 ? electricData.yData.reduce((a, b) => {
                                    return a + b;
                                }) : 0
                            }}</span>
                        <span class="SI"> 千瓦时(KW/h)</span>
                    </div>
                    <!-- 电度图表区域-->
                    <small-chart
                        :id="item.name"
                        :axis-data="electricData"
                        :axis-name="{xName:'',yName:'千瓦时(KW/h)'}"
                    ></small-chart>
                </div>
                <div v-if="item.name === '实时电压'" class="chartDiv">
                    <real-time-data
                        :id="item.name"
                        :chart-data="vChartData"
                    ></real-time-data>
                </div>
                <div v-if="item.name === '实时电流'" class="chartDiv">
                    <real-time-data
                        :id="item.name"
                        :chart-data="aChartData"
                    ></real-time-data>
                </div>
                <div v-if="item.name === '有功功率'" class="chartDiv">
                    <real-time-data
                        :id="item.name"
                        :chart-data="usefulChartData"
                    ></real-time-data>
                </div>
                <div v-if="item.name === '无功功率'" class="chartDiv">
                    <real-time-data
                        :id="item.name"
                        :chart-data="uselessChartData"
                    ></real-time-data>
                </div>
            </grid-item>
        </grid-layout>
    </div>
</template>
<script>
import realTimeData from '@/components/realTimeData';
import SmallChart from '@/components/smallChart';
import indexOption from '@/option/layoutOption';
import VueGridLayout from 'vue-grid-layout';

export default {
    name: 'efeManagement',
    created() {
        setInterval(() => {
            let chart = {
                xName: '',
                yName: '伏特(V)',
                yMinAndYMax: [220, 230]
            };
            let newData = {
                xData: new Date(),
                yData: Math.floor(Math.random() * (chart.yMinAndYMax[1] - chart.yMinAndYMax[0] + 1) + chart.yMinAndYMax[0])
            };
            this.vChartData = this.getChartData(newData, this.vData, chart);
            this.aChartData = this.getChartData(newData, this.aData, chart);
            this.usefulChartData = this.getChartData(newData, this.usefulData, chart);
            this.uselessChartData = this.getChartData(newData, this.uselessData, chart);
            this.electricChartData = this.getChartData(newData, this.electricData, chart);
        }, 2000);
    },
    data() {
        return {
            layout: indexOption.initLayout,
            //电压图表数据
            vChartData: {
                title: '',
                axisData: {
                    xData: [0],
                    yData: [0]
                },
                axisName: {
                    xName: '',
                    yName: ''
                },
                yMinAndYMax: [210, 250]
            },
            //电流图表数据
            aChartData: {
                title: '',
                axisData: {
                    xData: [0],
                    yData: [0]
                },
                axisName: {
                    xName: '',
                    yName: ''
                },
                yMinAndYMax: [210, 250]
            },
            //有用功率
            usefulChartData: {
                title: '',
                axisData: {
                    xData: [0],
                    yData: [0]
                },
                axisName: {
                    xName: '',
                    yName: ''
                },
                yMinAndYMax: [210, 250]
            },
            //无用功率
            uselessChartData: {
                title: '',
                axisData: {
                    xData: [0],
                    yData: [0]
                },
                axisName: {
                    xName: '',
                    yName: ''
                },
                yMinAndYMax: [210, 250]
            },
            //电度
            electricChartData: {
                title: '',
                axisData: {
                    xData: [0],
                    yData: [0]
                },
                axisName: {
                    xName: '',
                    yName: ''
                },
                yMinAndYMax: [210, 250]
            },
            //总电度
            totalElectricChartData: {
                title: '',
                axisData: {
                    xData: [0],
                    yData: [0]
                },
                axisName: {
                    xName: '',
                    yName: ''
                },
                yMinAndYMax: [210, 250]
            },
            vData: {
                xData: [],
                yData: []
            },
            aData: {
                xData: [],
                yData: []
            },
            usefulData: {
                xData: [],
                yData: []
            },
            uselessData: {
                xData: [],
                yData: []
            },
            electricData: {
                xData: [],
                yData: []
            },
            totalElectricData: {
                xData: [],
                yData: []
            }

        };
    },
    components: {
        SmallChart,
        realTimeData,
        GridLayout: VueGridLayout.GridLayout,
        GridItem: VueGridLayout.GridItem
    },
    computed: {
        draggable: function () {
            return this.$store.state.draggable;
        },
        resizable: function () {
            return this.$store.state.resizable;
        }
    },
    methods: {
        /*获取图表数据
        * newData:Object 新的数据
        * chart: Object 图表的数据
        * Data:Object 存储图表x，y轴的数据
        * return Object 需要传递给子组件的数据
        * */
        getChartData(newData, Data, chart) {
            if (Data.xData.length === 7) {
                Data.xData.shift();
                Data.yData.shift();
            }
            Data.xData.push(newData.xData);
            Data.yData.push(newData.yData);
            return {
                title: '',
                axisData: {
                    xData: Data.xData,
                    yData: Data.yData
                },
                axisName: {
                    xName: chart.xName,
                    yName: chart.yName
                },
                yMinAndYMax: chart.yMinAndYMax
            };
        }
    }
};
</script>
<style lang="less" scoped src="../../assets/less/efeManagement.less">
</style>
